/** * Create by mzq * Description: 用户性别年龄分布图 * Date: 2024/9/14 16:50 * Update: 2024/9/14
16:50 */
<template>
  <div id="RightUserGenderAndAgeChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  data: Object
})

// 男性数组
const manArr = ref([])

// 女性数组
const womanArr = ref([])

const init = () => {
  let myChart = echarts.init(document.getElementById('RightUserGenderAndAgeChart'))
  let options = {
    tooltip: {
      trigger: 'axis',

      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '0',
      right: '0%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      show: false,
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ['20岁以下', '20-30岁', '30-40岁', '50-60岁', '70-80岁', '80岁以上']
    },
    series: [
      {
        name: '男',
        type: 'bar',
        stack: 'total',
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: manArr.value,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#015EEA'
            },
            {
              offset: 1,
              color: '#00C0FA'
            }
          ])
        }
      },
      {
        name: '女',
        type: 'bar',
        stack: 'total',
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: womanArr.value,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#F090F4'
            },
            {
              offset: 1,
              color: '#F75A72'
            }
          ])
        }
      }
    ]
  }

  myChart.setOption(options, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.data,
  (val) => {

    for (let i = 0; i < val.historyMonitorCnt.todayDeepMonitor.ageCount.length; i++) {
      manArr.value.push(val.historyMonitorCnt.todayDeepMonitor.ageCount[i].man)
      womanArr.value.push(val.historyMonitorCnt.todayDeepMonitor.ageCount[i].woman)
    }

    init()
  }
)
</script>
<style scoped lang="scss">
#RightUserGenderAndAgeChart {
  width: 1.078125rem /* 207/192 */;
  height: 1.3542rem /* 260/192 */;
}
</style>